<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-X-admin2.2</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	 
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/global.css" /> 
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
	  <script type="text/javascript" src="js/jquery.min.js" ></script>
 
	</head>

	<body> 
		<div class="x-nav">
			<span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		<div class="layui-fluid" id="saveTr">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card" id="showTea">
						<div class="layui-card-body ">
							<form class="layui-form layui-col-space5">

							</form>
						</div>
						<div class="layui-card-body ">
							<table class="layui-table layui-form" id="tb">
								<thead>
									<tr>
										<th>
											选择
											 
										</th>
										<th>id</th>
										<th>姓名</th>
										<th>邮件</th>
								</thead>
								<tbody>
	                               <tr v-for="(em,index) in pageArr">
	                                	<td><input type="checkbox" name="temail" :value="em.email" lay-skin="primary"></td>
										<td >{{ em.userId }}</td>
										<td>{{ em.mobile }}</td>
										<td>{{ em.email }}</td>
							 
									</tr>
								</tbody>
							</table>
							  <div class="paging" id="pageHelper">
							<a href="#" @click="first" title="">首</a>
							<a id="backpage" @click="last" href="#" title="">&lt;</a>
							<a id="nextpage" href="#" @click="next" title="">&gt;</a>
							<a href="#" @click="end" title="">末</a>
								<div class="layui-inline layui-show-xs-block">
									<input type="text" id="num" size="1" style="height: 25px;"  class="layui-input">
								</div> 
								<a href="#" @click="tz" title="">跳转</a>
							 共：<span id="sp">{{this.totalPage}}</span>页
							<div class="clear"></div>
						</div>
						</div>
						<div class="layui-form-item">
							<label for="L_repass" class="layui-form-label"></label>
							<button class="layui-btn" lay-filter="add" onclick="addTeaIdCourId()" lay-submit="">增加</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!--引入Vue的js 开发环境版本., 包含了有帮助的命令行警告-->
		<script src="js/vue.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/pageHelp.js"></script>
		 <script type="text/javascript" src="js/jquery.cookie.js"></script>
			<script>  
			const saveTr = new Vue({ 
				el: "#saveTr",
				data: {
					article: [],
				 
					page: 1, //当前页
				    totalPage: 0 ,//总页数
				    pageArr: [] //中间值，循环所用的数据
				},
				methods: {
						//首页
					first: function() {
						this.page = 1;
						this.pageArr = pageHelp(this.article, 5, 1);
					},
					//上一页
					last: function() {
						this.page = this.page - 1;
						if(this.page <= 1) {
							layer.msg("已经第一页了")
							this.page=1;
						}
						this.pageArr = pageHelp(this.article, 5, this.page);
					},
					//下一页
					next: function() {
						this.page = this.page + 1;
						console.log(this.page)
						if(this.page >= this.totalPage) {
						layer.msg("已经最后一页了")
							this.page=this.totalPage;
						}
						this.pageArr = pageHelp(this.article, 5, this.page);
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.pageArr = pageHelp(this.article, 5, this.totalPage)
					},
					
					//跳转页面
					tz: function() {
						var num=$("#num").val();
						if(num>this.totalPage||num<1){
						layer.msg("请输入正确的页数")	
						$("#num").val("");
						
						}
						this.pageArr = pageHelp(this.article, 5, num)
						$("#num").val("");
					},
					
					edit:function(articleId){			 		 
			 		  $.cookie("articleId",articleId);  
					}
				},
				created:function() {
						axios.defaults.headers.common["token2"] = $.cookie("token2");
					let _this = this;
					axios.get("http://localhost:9095/admin/edu/listedu").then(function(response) {
					console.log(response.data.data);
						_this.article = response.data.data;
					 
						_this.pageArr = _this.article; //数据长度	
						_this.totalPage = Math.ceil(_this.pageArr.length / 5) //总页数
					    _this.first();
						
						
					});				
				}
			})
			
			
			
			function addTeaIdCourId() {
				var id="";
				 
				obj = document.getElementsByName("temail");
			 
				 var st = $("input[name='temail']");
				 $.each(st, function(index, obj) {
					if(obj.checked == true) {
						id += $(obj).val()+",";
					 
					}
				}) 
					console.log(id);
					 
					parent.$("#em").text(id); 
					
				// 获得frame索引
					var index = parent.layer.getFrameIndex(window.name);
					//关闭当前frame
					parent.layer.close(index);
		 
			}
			
			
			
				layui.use(['laydate', 'form'], function() {
			var laydate = layui.laydate;
			var form = layui.form;

			//执行一个laydate实例
			laydate.render({
				elem: '#start' //指定元素
			});

			//执行一个laydate实例
			laydate.render({
				elem: '#end' //指定元素
			});
		});
		
		
		</script>
		
		
		
		
		 <script>
			 
			function edit() {
				$("#name").val("");
			}
		 
		</script> 
	</body>
	<script>
		layui.use(['laydate', 'form'],
			function() {
				var laydate = layui.laydate;

				//执行一个laydate实例
				laydate.render({
					elem: '#start' //指定元素
				});

				//执行一个laydate实例
				laydate.render({
					elem: '#end' //指定元素
				});
			});
	</script>

</html>